<template>
  <div>
    <div class="flex-center-wrap notice-head">
      <img
        class="img-warning"
        src="//image.zlketang.com/public/news/images/new_official/pay/pay-warning-icon.png"
      />
      <div class="notice-title">购买须知</div>
    </div>
    <div v-html="productInfo.purchase_notice"></div>
    <div
      class="notice-btn"
      @click="toBuyDetail"
      v-if="productInfo.purchase_detail_json_url"
    >
      查看《{{ productInfo.notice_title }}》完整内容>
    </div>
  </div>
</template>

<script>
export default {
  name: 'purchaseNotes',
  data() {
    return {}
  },
  props: {
    productInfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 跳转购课须知页
    toBuyDetail() {
      let url = '/ac/buy_course_notice_new'
      this.goTo(url, {
        query: {
          products: this.productInfo.product_id,
          curProduct: this.productInfo.product_id
        },
        target: '_blank'
      })
    }
  },
  mounted() {}
}
</script>

<style scoped>
.img-warning {
  margin-right: 4px;
  width: 14px;
  height: 14px;
}
.notice-title {
  font-size: 15px;
  font-weight: 500;
  color: #383838;
  line-height: 20px;
}
.notice-head {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.notice-btn {
  cursor: pointer;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #3480ff;
  line-height: 22px;
}
</style>
